<template>
	<!-- 设置提醒 -->
	<view>
		<view class="status" :style="{height:`${statusHeight}px`}"></view>
		<view :style="{height:`${statusHeight}px`}" style="background-color: #F5F5F5;"></view>
		<view class="bg"></view>
		<view class="navTitleShell">
			<view class="navImg">
				<image class="headImg" :src="userData.headPortrait"></image>
			</view>
			<view class="navTitle">
				<view class="navTitleTextShell" @click="switchHandle(1)">
					<view class="navTitle" :class="current==1?'active':''">严重缺货</view>
					<view class="redLine" v-if="current==1"></view>
				</view>
				<view class="navTitleTextShell" @click="switchHandle(2)">
					<view class="navTitle" :class="current==2?'active':''">其他</view>
					<view class="redLine" v-if="current==2"></view>
				</view>
			</view>
		</view>
		<view style="height: 200rpx;"></view>
		<view class="bottomShell">
			<view class="bottomListShell">
				<block v-for="(item,index) in list" :key="index">
					<view class="item">
						<view class="itemTopShell">
							<view class="itemName">{{item.deviceName}}</view>
							<view class="itemNetTypeShell">
								<view class="netType" :class="item.network==1?'green':'red'"></view>
								<view class="netTypeText">{{item.network==1?'在线':'离线'}}</view>
							</view>
						</view>
						<view class="itemBottomShell">
							<view class="itemContent">
								<view class="address">{{item.address}}</view>
								<view class="numShell">当前柜内商品<text class="num">{{item.stockName}}</text>瓶</view>
							</view>
							<text class="repleButton" @click="repleHandle(item)">补货</text>
						</view>
					</view>
				</block>
			</view>
			<view class="buttonShell">
				<view class="button" @click="getRemined">设置提醒</view>
			</view>
			<view class="mask" v-if="isSetting">
				<view class="maskBottomShell">
					<view class="maskGoodsInfo">
						<view class="" style="display: flex; justify-content: flex-end;">
							<image @click="clickMask" src="../../static/image/clearIcon.png" class="clearImge" mode="">
							</image>
						</view>
						<view class="remindBox">
							<view class="remindText">
								提醒比例(%)
							</view>
							<input type="number" @input="checkNum($event)" v-model="ratioValue" :maxlength="5"
								placeholder="请设置提醒比例" class="remindInput" value="" />
						</view>
						<view class="maskButtonShell">
							<view class="maskButton" @click="setRemined">保 存
							</view>
						</view>
					</view>
				</view>
			</view>
			<TabBar current="2" />
		</view>
	</view>
</template>

<script>
	import TabBar from "@/components/tabBar.vue"
	export default {
		components: {
			TabBar
		},
		data() {
			return {
				isSetting: false,
				statusHeight: 0, //状态栏
				current: 1, //标题活跃值
				pageSize: 10,
				pageNumber: 1,
				isLoadMore: false,
				list: [],
				ratioValue: 0,
				userInfo: {},
				userData: {
					headPortrait: '../../static/logo.png'
				}
			}
		},
		onReady() {
			this.statusHeight = getApp().globalData.statusBarHeight
		},
		onShow() {
			this.list = []
			this.getData()
		},
		onLoad() {
			this.userData = uni.getStorageSync('userData').user
			// console.log(this.userData)
		},
		onReachBottom() {
			if (this.isLoadMore) {
				this.pageNumber += 1
				this.getData()
			}
		},
		methods: {
			selectHandle() {},
			// 点击蒙版
			clickMask() {
				this.$set(this, 'isSetting', false)
				// console.log(this.isSetting)
			},
			// 点击标题切换
			switchHandle(active) {
				this.current = active
				this.pageNumber = 1
				this.list = []
				this.getData()
			},
			checkNum(e) {
				let val = e.target.value.replace(/(^\s*)|(\s*$)/g, "")
				// console.log(val)
				if (!val) {
					this.ratioValue = '';
					return
				}
				// (/^0|[^\d]/g, '') /[^\d]/g
				var reg = /^0|[^\d]/g
				// 只能是数字和小数点，不能是其他输入
				val = val.replace(reg, "")
				// // 保证第一位只能是数字，不能是点 0
				val = val.replace(/^\0/g, "");

				// // 小数只能出现1位
				// val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
				// // 小数点后面保留2位
				// val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
				// console.log(val)
				if (Number(val) > 100) {
					this.$nextTick(() => {
						this.ratioValue = 0;
						uni.showToast({
							title: '不能超过百分百',
							duration: 1500,
							icon: 'none'
						})
					})
				} else {
					this.$nextTick(() => {
						this.ratioValue = val;
					})
				}

			},

			// 获取库存提醒
			getRemined() {
				this.$set(this, 'isSetting', true)
				this.http({
					url: '/device/getReminder',
					data: {},
					method: "POST",
					success: res => {
						if (res.code == 200) {
							this.ratioValue = res.data.proportion
						}
					}
				})
			},
			// 设置库存提醒
			setRemined() {
				if (this.ratioValue == '' || this.ratioValue == null) {
					uni.showToast({
						icon: 'none',
						title: '不能为空'
					})
				} else {
					this.list = []
					// console.log('e')
					this.http({
						url: "/device/setReminder",
						data: {
							proportion: this.ratioValue,
							userId: this.userData.customerId
						},
						method: 'POST',
						success: res => {
							if (res.code == 200) {
								uni.showToast({
									icon: 'success',
									title: '操作成功'
								})
								this.clickMask()
								this.getData()
							}
						}
					})
				}
			},
			// 点击补货
			repleHandle(item) {
				uni.navigateTo({
					url: "/pages/setRemined/currentDevice/currentDevice?id=" + item.id
				})
			},
			// 获取设备列表 isAmple 1验证缺货
			getData() {
				this.http({
					url: "/device/deviceList",
					data: {
						pageSize: this.pageSize,
						pageNumber: this.pageNumber,
						isAmple: this.current,
						deviceName: ""
					},
					method: "POST",
					success: res => {
						if (res.code == 200) {
							this.list = this.list.concat(res.data.list)
							if (res.data.list.length < this.pageSize) {
								this.isLoadMore = false
							} else {
								this.isLoadMore = true
							}
						}
					}
				})
			},
		}
	}
</script>

<style scoped>
	.status {
		width: 100%;
		position: fixed;
		background-color: #FFFFFF;
		z-index: 99999;
	}

	.bg {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #F5F5F5;
		z-index: -1;
	}

	.navTitleShell {
		width: 100%;
		box-sizing: border-box;
		padding: 10rpx 40rpx;
		background-color: #FFFFFF;
		position: fixed;
		z-index: 999;
	}

	.navImg {
		width: 100%;
		padding: 30rpx 0;
	}

	.headImg {
		width: 56rpx;
		height: 56rpx;
		display: block;
		border-radius: 50%;
	}

	.navTitle {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.navTitleTextShell {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.navTitleText {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: rgba(0, 0, 0, 0.45);
	}

	.redLine {
		width: 100%;
		height: 8rpx;
		background-color: #E32929;
	}

	.mask {
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99999;
	}

	.maskBottomShell {
		width: 100%;
		height: 38%;
		background-color: #FFFFFF;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		position: fixed;
		bottom: 0;
		box-sizing: border-box;
		padding: 40rpx;
	}

	.active {
		font-size: 34rpx;
		color: rgba(0, 0, 0, 0.85);
	}

	.bottomShell {
		width: 100%;
		box-sizing: border-box;
		padding: 16rpx 40rpx;
	}

	.bottomListShell {
		width: 100%;
		padding-bottom: 280rpx;
	}

	.item {
		width: 100%;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		margin-top: 16rpx;
	}

	.itemTopShell {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.itemName {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #000000;
		width: 80%;
	}

	.itemNetTypeShell {
		display: flex;
		align-items: center;
	}

	.netType {
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		margin-right: 6rpx;
	}

	.netTypeText {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.65);
	}

	.green {
		background-color: #0AAB24;
	}

	.red {
		background-color: #E32929;
	}

	.itemBottomShell {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.itemContent {
		width: 70%;
		display: flex;
		flex-direction: column;
		margin-top: 30rpx;
	}

	.address,
	.numShell {
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 24px;
		color: rgba(0, 0, 0, 0.65);
	}

	.num {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #E32929;
	}

	.buttonShell {
		width: 100%;
		box-sizing: border-box;
		padding: 7rpx 0;
		padding-bottom: 200rpx;
		position: fixed;
		bottom: 0;
		background-color: #F5F5F5;
		z-index: 520;
	}

	.button {
		width: 90%;
		text-align: center;
		padding: 20rpx 0;
		border-radius: 4rpx;
		background-color: #E32929;
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
	}

	.maskButtonShell {
		width: 90%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: absolute;
		bottom: 100rpx;
		justify-content: center;
	}

	.maskButton {
		width: 45%;
		text-align: center;
		padding: 15rpx 0;
		background-color: #E32929;
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		border-radius: 4rpx;
	}

	.clearImge {
		width: 35rpx;
		height: 35rpx;
	}

	.repleButton {
		text-align: center;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		background-color: #E32929;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
	}

	.remindBox {
		display: flex;
		margin-top: 145rpx;
		align-items: center;
	}

	.remindText {}

	.remindInput {
		padding-left: 20rpx;
		border: 1px solid #EEEEEF;
		height: 80rpx;
		width: 65%;
		border-radius: 17rpx;
		margin-left: 25rpx;
	}
</style>
